import React, { useEffect, useState } from 'react'
import { XoProTable } from '@/components/XoProTable';
import styles from './nickName.less';
import type { ProColumns } from '@ant-design/pro-table';
import type { CourseData } from '@/models/coursedata';
import { groupOptionList, videoCourseDataList } from '@/services/situation';
import { ProFormSelect } from '@ant-design/pro-form';
import { onRequestNickName } from '@/utils/requestPhone';
import { history } from 'umi';
export default function Video(props: any) {
  // const stepId = history.location.query?.id;
  const activityId=history.location.query?.activityId;
  const [selectData, setData] = useState<any>([]);
  const { stepIdNew } = props;
  useEffect(() => {
    (async () => {
      const res = await groupOptionList({ activityId: activityId })
      const res1 = res.result?.map((item: any) => {
        return { label: item.name, value: item.id }
      })
      setData(res1)
    })();
  }, []);
  const columns: ProColumns<CourseData>[] = [
    {
      dataIndex: 'uid',
      title: '用户ID',
      search: false
    },
    {
      dataIndex: 'nickname',
      title: '用户昵称',
      search: false,

    },
    {
      dataIndex: 'phone',
      title: '手机号',
      search: false
    },
    {
      dataIndex: 'uid',
      title: '昵称/手机号',
      width: 150,
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            wrapperCol={{ span: 24 }}
            showSearch
            debounceTime={500}
            name="uid"
            request={onRequestNickName}
          />
        )
      }
    },
    {
      dataIndex: 'groupName',
      title: '班级',
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="groupId"
            placeholder="请选择"
            debounceTime={500}
            colon={false}
            options={selectData}
          />
        )
      }
    },
    {
      dataIndex: 'teacherName',
      title: '辅导老师',
      search: false
    },
    {
      dataIndex: 'studyStatus',
      title: '是否观看',
      search: false,
      valueEnum:{
        1:'未观看',
        2:'已观看'
      }
    }
  ]

  return (
    <XoProTable
      className={styles.playlist}
      request={async (params) => {
        const body = (await videoCourseDataList({ ...params, stepId: Number(stepIdNew) }))?.result;
        return {
          data: body?.records,
          total: body?.total,
        };
      }}
      options={false}
      rowKey="key"
      scroll={{ x: 1080 }}
      columns={columns}
      hasIndex={false}
    />
  )
}
